<template>
  <div id="app" class="work">
    <div class="files-title">
      <h3>考勤统计</h3>
      <p>{{ searchData.stuName }} 在 {{ searchData.semesterName }} 请假 <span> {{absence}} 天</span>，迟到<span> {{ late }} 次</span></p>
    </div>
    <line-bar ref="lineBar"  :chartData="chartData" :YAxis="YAxis" v-on="$listeners"></line-bar>
  </div>
</template>
<script>
import { StudengFiles } from '@/utils/skStudentFilesMixin.js'
import LineBar from "../modules/line-bar.vue";
export default {
  name: 'work',
  mixins:[StudengFiles],
  data() {
    return {
      url: {
        query: '/management/skStudentCheck/getStudentCheckByMonth',
      },
      
      chartData:[
        {
          legendTitle:"出勤天数",
          type:"bar",
          color:["#AEF87A","#01BABC"]
        },
        {
          legendTitle:"迟到天数",
          type:"bar",
          color:["#0091FF","#7049F0"]
        },
        {
          legendTitle:"请假天数",
          type:"bar",
          color:["#F7734E","#E12945"]
        },
        {
          legendTitle:"考勤率",
          type:"line",
          color:["#73DD39"]
        },
        {
          legendTitle:"迟到率",
          type:"line",
          color:["#9eaeff"]
        }
      ],
      YAxis:[
        {
          name:"天",
          position:"left"
        },
        {
          name:"%",
          position:"right"
        },
      ],
      absence:0,   //请假
      late:0      //迟到
    }
  },
  components: {
    LineBar
  },
  props:["dataForm","semesterName","className"],
  filters: {},

  computed: {},

  created() {},

  activated() {},

  methods: {
    // /查看单个幼儿数据
    async initStudentChart(){
      let data = await this.queryData();
      let categorys = [],xData = [];
      this.absence = 0;
      this.late = 0
      const monthColumns = this.dataForm.daysColums;
      let arr1 = [],arr2 = [],arr3 = [],arr4 = [],arr5 = [];
      this.absence = 0
      this.late = 0
      for(let rowIndex = 0; rowIndex < monthColumns.length; rowIndex++){
        const rowString = monthColumns[rowIndex].toString();
        categorys.push(rowString);
        const monthData = data.find(item => item.month == rowString);
        if (monthData){
          let rate = Number((monthData.rate * 100).toFixed(2))
          let lateRate = Number((monthData.lateRate * 100).toFixed(2))
          arr1.push(monthData.actualArrival)
          arr2.push(monthData.late)
          arr3.push(monthData.absence)
          arr4.push(rate)
          arr5.push(lateRate)
          this.absence += monthData.absence
          this.late += monthData.late
        } else {
          arr1.push(0)
          arr2.push(0)
          arr3.push(0)
          arr4.push(0)
          arr5.push(0)
        }
      }
      xData.push(arr1,arr2,arr3,arr4,arr5)
      this.$refs.lineBar.initEChart(categorys,xData);
    },
   
  }
}
</script>
<style scoped>
@import url(~@/assets/less/studentFiles.css); 
</style>
